<template>
  <div>
    <h1>reactive 函数</h1>
    <hr>
    <ul>
      <li>{{ person1 }}</li>
      <li>{{ person2 }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'
// 1. person 变量设置了默认值,类型推荐会自动添加类型
const person1 = reactive({
  id: 1,
  name: '张三',
  age: 18,
  sex: '男'
})
// 2. 实际开发中，定义类型传入
interface Person {
  id: number
  name: string
  age: number
  sex: string
}
const person2 = reactive({} as Person)
person2.id = 1
</script>

<style scoped>

</style>